<template>
    <view class="Feedback">
        <view class="type">
            <view class="title">选择问题类型</view>
            <view class="choose">
                <view class="text" v-for="(item,index) in question" :key="index">
                    <view :class="selectQuestion.indexOf(item) > -1 ? 'active' : ''" @tap='toggleQuestion(item)' class="matter">{{item}}</view>
                </view>
            </view>
        </view>
        <view class="describe">
           <textarea v-model="value" placeholder="请描述一下您的问题"></textarea>
        </view>
        <view class="upload">
            <view class="title">上传图片 ({{num || 0}}/4)</view>
            <view class="load">
                <view class="item" @tap='chooseImage'></view>
                <view class="photo" v-for="(item,index) in chooseImages" :key="index">
                    <image :src="item"></image>
                    <view class="iconfont icon-htmal5icon19"></view>
                </view>
            </view>
        </view>
        <view class="commit" @tap='submit'>提交</view>
    </view>
</template>

<script>
export default {
    data(){
        return{
            question:['功能问题','性能问题','体验问题','其他'],
            selectQuestion:[],
            //上传的图片
            chooseImages:[],
            value:'',
            num:''
        }
    },
    watch:{
        chooseImages(){
            this.num=this.chooseImages.length
        }
    },
    methods:{
        //切换问题
        toggleQuestion(item){
            const targetIndex=this.selectQuestion.findIndex(e => e === item);
            if(targetIndex >-1){
                this.selectQuestion.splice(targetIndex, 1)
            }else{
                this.selectQuestion.push(item);
            }  
        },
        //选择图片
        chooseImage(){
            //图片只能上传4张
            if(this.chooseImages.length < 4){
                uni.chooseImage({
                    count: 4 - this.chooseImages.length,
                    success:(res)=>{
                        this.chooseImages=this.chooseImages.concat(res.tempFilePaths);
                        
                    }
                })
            }else{
                uni.showToast({
                    title:'上传个数不能超过4张图片',
                    icon:'none'
                })
            }
        },
        //提交
        submit(){
            console.log(this.chooseImages,this.selectQuestion,this.value); 
        },
    }
}
</script>

<style lang="less" scoped>
.Feedback{
    padding: 20rpx;
    height: 100vh;
    background-color: #f9f9f9;
    .type{
        height: 203rpx;
        background-color: #fff;
        margin-bottom: 20rpx;
        padding-left: 29rpx;
        padding-top: 20rpx;
        .title{
            font-size: 28rpx;
            margin-bottom: 20rpx;
        }
        .choose{
            display: flex;
            flex-wrap: wrap;
            .text{
                width: 33%;
                margin-bottom: 20rpx;
                .matter{
                    width: 181rpx;
                    height: 46rpx;
                    background-color: #ededed;
                    border-radius: 23rpx;
                    color: #686767;
                    text-align: center;
                    font-size: 24rpx;
                    line-height: 46rpx;
                }
                .active{
                    background-color: #ffe6e6;
                    color: #ec535e;
                }
            }
        }
    }
    .describe{
        textarea{
            width: 655rpx;
            height: 391rpx;
            background-color: #fff;
            margin-bottom: 20rpx;
            padding: 22rpx 29rpx;
            color: #8c8c8c;
            font-size: 28rpx;
        }
    }
    .upload{
        height: 216rpx;
        background-color: #fff;
        margin-bottom: 20rpx;
        padding-left: 29rpx;
        padding-top: 20rpx;
        .title{
            font-size: 28rpx;
            margin-bottom: 20rpx;
        }
        .load{
            display: flex;
            .item{
                position: relative;
                width: 128rpx;
                height: 128rpx;
                background-color: #d8d8d8;
                margin-right: 9rpx;
            }
            .photo{
                 position: relative;
                 width: 128rpx;
                 height: 128rpx;
                 margin-right: 9rpx;
                image{
                    width: 128rpx;
                    height: 128rpx;
                }
                .iconfont{
                    position: absolute;
                    top: -20rpx;
                    right: -10rpx;
                    color: #e03440;
                    font-size: 60rpx;
                    opacity: .8;
                }

            }
            .item::before{
                content: '';
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                width: 74rpx;
                height: 6rpx;
                background: #a6a6a6;
            }
            .item::after{
                content: '';
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                width: 6rpx;
                height: 74rpx;
                background: #a6a6a6;
            }
        }
    }
    .commit{
        width: 711rpx;
        height: 70rpx;
        border-radius: 35rpx;
        background-color: #ea4350;
        color: #fff;
        text-align: center;
        line-height: 70rpx;
    }
}
</style>